<template>
	<!-- 投放系统-短剧列表 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('delivery:playlet:index')">
			<div class="d-flex j-sb" slot="header">
				<el-form class="d-flex b-s mt-2 mb-10" :inline="true" size="small" :model="dataForm"
					@keyup.enter.native="searchTableList()" @submit.native.prevent>
					<el-form-item label="短剧名称">
						<el-input v-model="dataForm.keyword" placeholder="短剧名称" clearable />
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary"
							@click="searchTableList()">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-circle-plus-outline" v-show="$hasPermission('delivery:playlet:create')"
							@click="addOrUpdateData()">添加短剧</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex">
					<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query' }"></vxe-toolbar>
				</div>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-table ref="playletTable" key="playletTable" border height="100%" resizable size="medium"
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:data="dataList">
							<vxe-column width="100" field="id" title="ID" sortable align="center"></vxe-column>
							<vxe-column width="200" field="name" title="短剧名称" align="center">
								<template v-slot="{ row }">
									<div>{{row.name}}</div>
									<div v-if="row.alias_name">
										<div>别名：【{{row.alias_name}}】</div>
								
									</div>
								</template>
							</vxe-column>
							<vxe-column width="120" field="cover" title="短剧封面图" align="center">
								<template v-slot="{ row }">
									<img class="pointer" width="80" height="auto" :src="row.cover" style="border-radius: 5px;"
										@click.stop="previewPicFn(row.cover,row.name+' 封面图')">
								</template>
							</vxe-column>
							<vxe-column width="120" field="thumbnail" title="短剧缩略图" align="center">
								<template v-slot="{ row }">
									<img class="pointer" width="80" height="auto" :src="row.thumbnail" style="border-radius: 5px;"
										@click.stop="previewPicFn(row.thumbnail,row.name+' 缩略图')">
								</template>
							</vxe-column>
							<vxe-column width="300" field="introduction" title="简介" align="center"></vxe-column>
							<vxe-column width="150" field="playet_episodes_count" title="总共集数" sortable align="center"></vxe-column>
							<vxe-column width="150" field="is_finish_name" title="是否完结" align="center"></vxe-column>
							<vxe-column width="120" field="amount" title="价格" sortable align="center"></vxe-column>
							<vxe-column width="120" field="pay_type_name" title="支付类型" align="center"></vxe-column>
							<vxe-column width="200" field="last_episode_name" title="最后集名称" align="center"></vxe-column>
							<vxe-column width="200" field="pay_start_cid" title="付费起始剧集id" sortable align="center"></vxe-column>
							<vxe-column width="100" field="status_name" title="状态" align="center"></vxe-column>
							<vxe-column width="120" field="likes_number" title="点赞数量" sortable align="center"></vxe-column>
							<vxe-column width="120" field="share_number" title="分享数量" sortable align="center"></vxe-column>
							<vxe-column width="120" field="hot_number" title="热度数量" sortable align="center"></vxe-column>
							<vxe-column width="160" field="created_at" title="创建时间" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column width="160" field="updated_at" title="更新时间" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column v-if="!tableLoading||(dataList.length&&$hasPermissionNum(['delivery:playlet:episodesList']))"
							title="操作" fixed="right" width="150" align="center" cell-class-name="py-10">
								<template v-slot="{ row }">
									<el-button size="medium" round icon="el-icon-video-play"
									v-if="$hasPermission('delivery:playlet:episodesList')"
									@click="lookVideoData(row)" type="primary">查看剧集</el-button>
								</template>
							</vxe-column>
							<template #empty>
								<div class="d-flex flex-row a-center j-center font-md">
									<div class="d-flex">
										暂时没有数据~
									</div>
								</div>
							</template>
						</vxe-table>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
					:page-size="dataForm.pageSize" :total="total" :pageSizes="[20,50,100,150,200]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
			<!-- 新增/修改弹窗 -->
			<playlet-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDialog"
				@refreshDataList="getTableList"></playlet-add-or-update>
			<!-- 批量上传弹窗 -->
			<upload-add-or-update v-if="uploadAddVisible" ref="uploadAddDialog"></upload-add-or-update>
			<!-- 图片预览弹窗 -->
			<pic-preview v-if="picVisible" ref="picDialog"></pic-preview>
			<!-- 视频预览弹窗 -->
			<video-view v-if="videoVisible" ref="videoDialog"></video-view>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	let that;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mixinViewModule from '@/mixins/view-module'
	import PlayletAddOrUpdate from './playlet-add-or-update'
	import UploadAddOrUpdate from './upload-add-or-update'
	import VideoView from './video-view'
	import PicPreview from './picPreview'
	export default {
		mixins: [mixinViewModule],
		components: {
			PlayletAddOrUpdate,
			UploadAddOrUpdate,
			PicPreview,
			VideoView
		},
		data() {
			return {
				tableLoading:false,
				click_rowData:{},
				curent: 0,
				total: 0,
				curName: '',
				dataForm: {
					page: 1,
					pageSize: 20,
					keyword:'',//搜索
				},
				playTitle:'',
				innerPlayVisible: false,
				uploadAddVisible: false,//批量上传弹窗
				picVisible: false,
				videoVisible:false,
				// 增改
				addOrUpdateVisible: false,
				roleVisible: false,
				dataList: [],
				customColumns: [],
				columns: [{
						title: 'ID',
						field: 'id',
						width: 100,
						sortable: true,
						align: 'center'
					},
					{
						title: '短剧名称',
						field: 'name',
						width: 200,
						sortable: false,
						align: 'center'
					},
					{
						title: '短剧封面图',
						field: 'cover',
						width: 120,
						sortable: false,
						align: 'center',
						type: 'html', // 标识该列需要显示图片
						formatter: ({ cellValue,row }) => {
						    return `<img src="${cellValue}" width="80" height="auto" class="pointer" onclick="previewPicFn(\'${cellValue}\',\'${row.name+' 封面图'}\')" style="border-radius: 5px;">`
						}
					},
					{
						title: '短剧缩略图',
						field: 'thumbnail',
						width: 120,
						sortable: false,
						align: 'center',
						type: 'html', // 标识该列需要显示图片
						formatter: ({ cellValue,row }) => {
						    return `<img src="${cellValue}" width="80" height="auto" class="pointer" onclick="previewPicFn(\'${cellValue}\',\'${row.name+' 缩略图'}\')" style="border-radius: 5px;">`
						}
					},
					{
						title: '简介',
						field: 'introduction',
						width: 300,
						sortable: false,
						align: 'center'
					},
					// {
					// 	title: '微信剧目审核状态',
					// 	field: 'drama_status_name',
					// 	width: 150,
					// 	sortable: false,
					// 	align: 'center'
					// },
					{
						title: '总共集数',
						field: 'playet_episodes_count',
						width: 150,
						sortable: true,
						align: 'center'
					},
					{
						title: '是否完结',
						field: 'is_finish_name',
						width: 100,
						sortable: false,
						align: 'center'
					},
					{
						title: '价格',
						field: 'amount',
						width: 120,
						sortable: true,
						align: 'center'
					},
					{
						title: '支付类型',
						field: 'pay_type_name',
						width: 120,
						sortable: false,
						align: 'center'
					},
					{
						title: '最后集名称',
						field: 'last_episode_name',
						width: 200,
						sortable: false,
						align: 'center'
					},
					{
						title: '付费起始剧集id',
						field: 'pay_start_cid',
						width: 200,
						sortable: false,
						align: 'center'
					},
					{
						title: '状态',
						field: 'status_name',
						width: 100,
						sortable: false,
						align: 'center'
					},
					{
						title: '点赞数量',
						field: 'likes_number',
						width: 120,
						sortable: true,
						align: 'center'
					},
					{
						title: '分享数量',
						field: 'share_number',
						width: 120,
						sortable: true,
						align: 'center'
					},
					{
						title: '热度数量',
						field: 'hot_number',
						width: 120,
						sortable: true,
						align: 'center'
					},
					{
						title: '创建时间',
						field: 'created_at',
						width: 180,
						sortable: true,
						align: 'center'
					},
					{
						title: '更新时间',
						field: 'updated_at',
						width: 180,
						sortable: true,
						align: 'center'
					},
					{
						title: '操作',
						field: 'other',
						width: 150,
						fixed: 'right',
						sortable: false,
						align: 'center',
						slots: {
							default: ({
								row
							}) => {
								return [ <el-button size = "medium" round
								icon = "el-icon-video-play"
								v-show={this.$hasPermission('delivery:playlet:episodesList')}
								onClick = {
									() => this.lookVideoData(row)
								}
								type = "primary" >查看剧集</el-button>
								]
							}
						}
					}

				]
			}
		},
		created() {
			this.dataForm['applet_ids'] = this.info.applet_id;
			this.dataForm['delivery_user_id'] = this.info.delivery_user_id;
		},
		watch:{
			'info.applet_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (typeof newVal == 'number') {
							console.warn('========监听小程序ID发生变化=======');
							console.log(newVal);
							this.dataForm['applet_ids'] = newVal;
							this.$forceUpdate();
							if (this.$hasPermission('delivery:playlet:index')) {
								if(this.$hasPermission('delivery:delivery:teamList')){
									if(Array.isArray(this.dataForm['delivery_user_id'])){
										this.getTableList();
									}
									return;
								}
								this.getTableList();
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
			'info.delivery_user_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (Array.isArray(newVal)) {
							console.warn('========投放组员ID发生变化=======');
							console.log(newVal);
							this.dataForm['delivery_user_id'] = newVal;
							this.$forceUpdate();
							if (this.$hasPermission('delivery:playlet:index')) {
								this.getTableList();
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
		},
		mounted(){
			that = this;
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			])
		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),
			searchTableList(){
				this.$refs.playletTable.clearFilter();
				this.getTableList(true);
			},
			//预览图片
			previewPicFn(cover,title) {
				this.picVisible = true;
				this.$nextTick(() => {
					this.$refs.picDialog.update(cover, title);
				})
			},
			cellClickFn({row,columnIndex}){
				this.click_rowData = row;
			},
			closeVideoDialogFn() {
				console.log(this.player);
				if (this.player) {
					this.player.pause();
					this.player.seek(0);
				}
			},
			async getTableList(init = false) {
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
					if(this.$refs.xTable){
						this.$refs.xTable.clearFilter();
					}
				}
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/delivery/playlet?'+this.$qs.stringify(this.dataForm))
				this.tableLoading = false;
				if(typeof tableRes == 'object' && tableRes!=null){
					this.total = tableRes.total;
					if(Array.isArray(tableRes.data)){
						let tdlen = tableRes.data.length;
						if(tdlen){
							this.dataList = tableRes.data;
							return
						}
					}
				}
				this.dataList = [];
			},
			// 查看视频
			async lookVideoData(row) {
				console.log(row)
				this.videoVisible = true;
				if (typeof row == 'object' && row != null) {
					// this.curName = row.real_name;
					const id = row.id;
					const videoListRes = await this.$axios.get(`/api/delivery/playlet/episodesList/${id}`, {});
					if(Array.isArray(videoListRes)){
						if(videoListRes.length){
							this.$nextTick(() => {
								this.$refs.videoDialog.title=row.name;
								this.$refs.videoDialog.update(videoListRes);
							})
							return;
						}
					}
					this.$message({
						message: '剧集视频为空！',
						type: 'error',
						duration: 1200
					})
				}
			},
			//新增/修改弹窗
			async addOrUpdateData(row) {
				console.log(row)
				this.addOrUpdateVisible = true;
				if (typeof row == 'object' && row != null) {
					// this.curName = row.real_name;
					const id = row.id;
					const userRes = await this.$axios.get(`/api/delivery/playlet/update/${id}`, {});
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.playId = id;
						this.$refs.addOrUpdateDialog.innerTitle = row.name;
						this.$refs.addOrUpdateDialog.update(userRes);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.playId = null;
						this.$refs.addOrUpdateDialog.init()
					})
				}
			},
			//批量上传弹窗
			async uploadAddData(row,type=1) {
				console.log(row)
				this.uploadAddVisible = true;
				if (typeof row == 'object' && row != null) {
					// this.curName = row.real_name;
					const id = row.id;
					const userRes = await this.$axios.get(`/api/delivery/playlet/update/${id}`, {});
					this.$nextTick(() => {
						this.$refs.uploadAddDialog.playId = id;
						this.$refs.uploadAddDialog.innerTitle = row.name;
						this.$refs.uploadAddDialog.dataForm.name = userRes.name;
						this.$refs.uploadAddDialog.init(type);
					})
				}
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/delivery/playlet/delete/${row.id}`, {}).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.getTableList()
							}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.vxe-cell .el-button){
		margin-bottom: 10px;
	}
</style>